<template>
    <div  class="ke-box">
        <el-row class="qrcode-box">
            <el-col :span="13" class="qrcode-box-left">
                <div class="title">待付金额：</div>
                <div>
                    <!-- {{ form.re.amt }} -->
                    <el-input v-model="form.re.amt" disabled />
                </div>
            </el-col>
        </el-row>
        <el-row class="qrcode-box">
            <!-- 判断微信和支付宝 -->
            <el-col :span="13" class="qrcode-box-right">
                <div class="title">付款条码：</div>
                <div>
                    <el-input v-model="form.re.authCode" placeholder="点击扫码" @focus="focusForm('authCode')" @blur="blurForm"
                        clearable @keyup.enter.native="handleConfirm" />
                    <div class="qrcode"></div>
                </div>
            </el-col>
        </el-row>
        <el-row class="qrcode-box">
            <el-col :span="13" class="qrcode-box-right">
                <div style="margin-left: 100px;margin-right: 10px;">说明 ：点客户付款码条码，手动输入条码数值，同样可以扣款</div>
            </el-col>
        </el-row>
        <el-row class="qrcode-box">
            <el-col :span="13" class="qrcode-box-left">
                <div class="title">支付结果：</div>
                <template v-for="item in finishList.re">
                    <div class="finish-box" v-if="item.payTypeName == '微信支付'">
                        <div class="finish-type-success" v-if="form.re.finishType == '成功'">
                            <!-- <el-input v-model="form.re.finishType" readonly /> -->
                            {{ form.re.finishType }}
                        </div>
                        <div class="finish-type-others" v-else>
                            <!-- <el-input v-model="form.re.finishType" readonly /> -->
                            {{ form.re.finishType }}
                        </div>
                        <div class="countdown" v-show="seconds < 31 && seconds > -1">（{{ seconds }}）</div>
                    </div>
                </template>
                <!-- v-show="seconds > 15 && form.re.finishType == '支付中...'" -->
                <el-button class="select-pay-btn" @click="searchPayType"
                    v-show="seconds > 30 && form.re.finishType == '支付中...'">网上支付查询</el-button>
            </el-col>
        </el-row>
        <el-row class="qrcode-box">
            <el-col v-show="false" :span="24" class="qrcode-box-left">
                <div class="title">支付成功返回码：</div>
                <div>
                    <el-input v-model="form.re.code" disabled />
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script setup >
import { formatDate } from '@/utils/chenhao'
import Api from '@/api'
const props = defineProps({
    form: {
        type: Object,
        // default: () => ({})
    },
    finishList: {
        type: Object,
    }
})
let { form, finishList } = props;
const emit = defineEmits(['emitCancel', 'emitSubmit', 'emitPaySuccess'])

watch(finishList.re, (nVal) => {
    console.log('微信里的watch finishList', nVal)
}, { deep: true })

let has_finish = ref(false)
// finishList.re.forEach(item => {
//     if (item.payTypeName == '微信支付') {
//         has_finish.value = true
//     }
// });

// 父组件小键盘点击确定
const handleConfirm = (params) => {
    if (!form.re.authCode) return ElNotification({
        title: '提示',
        message: '请扫描付款码',
        type: 'warning',
    })
    if (finishList.re.length > 0 && finishList.re[0].payTypeName == '微信支付' && finishList.re[0].finishType == '成功') return ElNotification({
        title: '提示',
        message: '已支付成功',
        type: 'success',
    })
    // if (form.re.finishType = "支付中...") return ElNotification({
    //     title: '提示',
    //     message: '正在支付中...',
    //     type: 'warning',
    // })
    let payData = {
        authCode: form.re.authCode,
        fee: form.re.amt,
        payType: '1',
        opType: '3',
    }
    // 保存到form里展示支付记录
    form.re.amtAct = form.re.amt
    form.re.createTime = formatDate('YY-MM-DD hh:mm:ss')
    // 调用微信和支付宝支付接口
    form.re.finishType = "支付中..."
    console.log('调用支付接口前的 payData :>> ', payData);
    clearIv(interval)
    interval = countdown();
    emit('emitPaySuccess', 'emitPaySuccess')
    // return
    Api.Common.PcObjProcess.Do({ "functionName": "MenberCodePay", "orgCode": "0004", "contentData": payData }).then(res => {
        console.log('调用微信和支付宝支付接口res :>> ', res);
        form.re.authCode = ""
        if (res.TradeState == "Success") {
            form.re.finishType = "成功"
            clearIv(interval)
            form.re.payCode = res.OutTradeNo
            emit('emitPaySuccess', 'emitPaySuccess')
        }
        else if (res.TradeState == "Fail") {
            form.re.payCode = res.OutTradeNo
            form.re.finishType = "支付中..."
            emit('emitPaySuccess', 'emitPaySuccess')
        }
    }).catch(err => {
        form.re.authCode = ""
        // console.log('err :>> ', err.ApiError);
        // if (err.ApiError.Message == '101 每个二维码仅限使用一次，请刷新再试') return
        form.re.finishType = "失败"
        emit('emitPaySuccess', 'emitPaySuccess')
        clearIv(interval)
    });
}

const seconds = ref(31);
let interval = reactive({ re: {} })
const countdown = () => {
    seconds.value = 30;
    interval = setInterval(() => {
        if (seconds.value === 0) {
            console.log('倒计时结束 :>> ');
            clearIv(interval);
        } else {
            seconds.value -= 1;
            if (seconds.value % 3 === 0 && form.re.finishType == '支付中...' && form.re.payCode) {
                searchPayType()
            }
        }
    }, 1000);
    return interval;
};
const clearIv = (interval) => {
    seconds.value = 31;
    clearInterval(interval);
}

// 网上支付查询
let flag = ref(0)
const searchPayType = (params) => {
    if(!form.re.payCode) return
    flag.value += 1
    let data = {
        "OutTradeNo": form.re.payCode,
        "payType": "1"
    }
    console.log('data :>> ', data, form.re);
    Api.Common.PcObjProcess.Do({ "functionName": "MenberCodePayQuery", "orgCode": "0004", "contentData": data }).then(res => {
        console.log('会员扫码支付查询 :>> ', res);
        if (res.result == "支付成功") {
            // ElNotification({
            //     title: '成功',
            //     message: '支付成功',
            //     type: 'success',
            // })
            clearIv(interval);
            form.re.finishType = "成功"
            emit('emitPaySuccess', 'emitPaySuccess')
            // clearInterval(interval)
        }
        else if (res.result == "等待支付") {
            // ElNotification({
            //     title: '提示',
            //     message: '支付中...',
            //     type: 'warning',
            // })
        }
        else if (res.result == "取消支付") {
            form.re.finishType = "取消支付"
            emit('emitPaySuccess', 'emitPaySuccess')
        }
    }).catch(err => {
        console.log('err :>> ', err);
        clearIv(interval);
        form.re.finishType = "失败"
        emit('emitPaySuccess', 'emitPaySuccess')
    });
}


// 数字键盘
const focusForm = (str) => {
    // keyboard.value = true
    emit('focusForm', str)
}
const blurForm = (params) => {
    // keyboard.value = false
}


defineExpose({ countdown, clearIv, handleConfirm })
</script>

<style scoped lang="scss">
.qrcode-box {
    .title {
        font-weight: 400;
        font-size: 16px;
        color: #212121;
        width: 100px;
        text-align: right;
    }

    .qrcode-box-left {
        margin-top: 20px;
        display: flex;
        align-items: center;
        // font-size: 16px;
        color: #999999;

        .finish-box {
            // position: reactive;
            display: flex;
            align-items: center;
            size: 16px;
            color: #FF3333;
            height: 50px;
            // font-size: 16px;

            .finish-type-success {
                ::v-deep {
                    .el-input__inner {
                        font-size: 16px;
                        color: #67C23A;

                    }
                }
            }

            .finish-type-others {
                ::v-deep {
                    .el-input__inner {
                        font-size: 16px;
                        color: #FF3333;

                    }
                }
            }

            .countdown {
                // position: absolute;
                // margin-top: -37px;
                // left: 130PX
            }
        }

        .select-pay-btn {
            width: 160px;
            height: 48px;
            background: #FFE566;
            border-radius: 8px;
            font-size: 18px;
            color: #212121;
            border: 0;
            margin-left: 20px;
        }
    }

    .qrcode-box-right {
        margin-top: 20px;
        display: flex;
        align-items: center;
        position: relative;

        // .title{
        //     width: 100px;
        // }
        .qrcode {
            width: 24px;
            height: 24px;
            background-image: url('https://oss.jtmckj.com/pc/images/vip/qrcode.png');
            background-size: 24px 24px;
            background-repeat: no-repeat;
            background-position: center;
            position: absolute;
            top: 12px;
            left: 340px;
            cursor: pointer;
        }

        ::v-deep {

            .el-input__wrapper,
            .el-input__inner {
                cursor: pointer;
            }
        }

    }



    ::v-deep {
        .el-input {
            width: 280px;
            height: 40px;
            background: #F9F9F9;
            border-radius: 8px;
            font-weight: 400;
            font-size: 16px;
            color: #999999;
        }
    }
}
.ke-box {
    height: 330px;
}
</style>
